<!--
 @Description 横版卡片1
 @author hemengxia
 @date 2022/10/18
-->
<template>
  <div
    v-if="list.length >0"
    class="v-figure-style-two"
    :style="{
      'margin-top': top,
      'padding-left': px2rem(option.spacing),
      'padding-right': px2rem(option.spacing),
    }"
  >
    <div
      class="v-figure-style-main"
      :style="{
        'background-image': `url(${imgBg})`,
        'background-repeat': 'no-repeat',
        'background-size': '100% 100%',
        'background-position': 'top center',
      }"
    >
      <cell-title
        v-if="isShowModuleName || option.isMore === '1'"
        :title="isShowModuleName ? moduleName : ''"
        :hide-desc="option.isMore === '2'"
        :option="option"
        :style="{
          'background-color': backgroundColor,
          'border-radius': radiusSize + ' ' + radiusSize + ' 0 0',
        }"
      />
      <ul :style="setStyle()">
        <li v-for="(item, index) in list" :key="index">
          <div class="img-box" :style="{ height: imgHeight }">
            <label-comp
              v-if="
                (option.resource === 'hd' || option.resource === 'zb') &&
                  labelObj !== undefined
              "
              :label-list="item.labelList"
              class-name="my-tag"
            />
            <van-image
              :src="
                setImgPath(
                  getMapping(item, 'imgId'),
                  getMapping(item, 'imgUrl')
                )
              "
              :fit="imgType"
            >
              <template v-slot:loading>
                <van-loading type="spinner" size="20" />
              </template>
              <template v-slot:error>
                <img src="../../images/base/error-icon.png" />
              </template>
            </van-image>
          </div>
          <section class="user-name etc">
            {{ isInitData ? getMapping(item, "title") : item.name }}
          </section>
          <section
            v-if="showSubTilte"
            class="title etc"
            v-html="isInitData ? getMapping(item, 'subTitle') : item.otherInfo"
          />
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import mixins from './../mixins'
import LabelComp from '@/components/CustomPage/apps/widget/labelComp'
import CellTitle from './cellTitle'

export default {
  name: 'VFigureStyleTwo',
  components: { LabelComp, CellTitle },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: () => ({})
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      defaultList: [
        {
          name: '张三',
          coverHorizontalURL: '',
          id: '1',
          otherInfo: '高级技师',
          activityTypeName: '专项答题',
          activityType: 'HDLX_ZXDT',
          activityStatus: 'HDZT_YJS',
          activityStatusName: '已结束'
        },
        {
          name: '张三',
          coverHorizontalURL: '',
          id: '1',
          otherInfo: '高级技师',
          activityTypeName: '专项答题',
          activityType: 'HDLX_ZXDT',
          activityStatus: 'HDZT_JXZ',
          activityStatusName: '进行中'
        }, {
          name: '张三',
          coverHorizontalURL: '',
          id: '1',
          otherInfo: '高级技师',
          activityTypeName: '投票活动',
          activityType: 'HDLX_TPHD',
          activityStatus: 'HDZT_JXZ',
          activityStatusName: '进行中'
        }, {
          name: '张三',
          coverHorizontalURL: '',
          id: '1',
          otherInfo: '高级技师',
          activityTypeName: '问卷调查',
          activityType: 'HDLX_WJDC',
          activityStatus: 'HDZT_YJS',
          activityStatusName: '已结束'
        }],
      labelObj: undefined,
      pageSize: 0,
      active: '',
      souMold: '',
      classLabel: ''
    }
  },
  computed: {
    // 图片高度
    imgHeight() {
      return this.px2rem(this.option.imgHeight || 178)
    },
    // 是否展示副标题
    showSubTilte() {
      return this.option.showSubTilte
    },
    // 背景颜色
    bgcolor() {
      return this.option.bgcolor
    },
    imgBg() {
      return this.option.imgBg
    }
  },
  async created() {
    if (this.isInitData) {
      this.pageSize = this.option.pageSize || 4
      this.souMold = this.option.souMold
      this.classLabel = this.option.classLabel
      if (this.option.resource === 'hd' || this.option.resource === 'zb') {
        this.labelObj = await this.getLabelList()
      }
      await this.initData()
    } else {
      this.list = this.defaultList
    }
  },
  methods: {
    setStyle() {
      // 如果是展示了标题栏或者查看更多，则左上和右上的圆角就取消
      if (this.isShowModuleName || this.isMore === '1') {
        return {
          borderTopLeftRadius: 0,
          borderTopRightRadius: 0,
          backgroundColor: this.bgcolor
        }
      }
      return {
        backgroundColor: this.bgcolor
      }
    },
    setData(result) {
      let rows = []
      if (Object.prototype.toString.call(result.dataList?.data) === '[object Array]') {
        rows = result.dataList?.data || []
      } else {
        rows = result.dataList?.data.rows || []
      }

      if ((this.option.resource === 'hd' || this.option.resource === 'zb') && this.labelObj !== undefined) {
        this.setLabel(rows, 'list')
      } else {
        this.list = rows
      }
      console.log(this.list, 4)
    }
  }

}
</script>
<style lang="scss">
@import "@/styles/utility/rem.scss";
@import "~@/styles/mixin.scss";

.v-figure-style-two {
  position: relative;
  //padding: 0 rem(20) rem(20);
  .v-figure-style-main {
    > ul {
      margin: 0 auto;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;
      background-color: #fff;
      border-radius: rem(16);
      padding: rem(24) rem(20) 0;

      > li {
        border-radius: rem(16);
        width: rem(316);
        text-align: left;
        margin-bottom: rem(28);

        .img-box {
          width: rem(316);
          height: rem(178);
          border-radius: rem(12);
          position: relative;

          .van-image {
            width: 100%;
            height: 100%;

            .van-image__img {
              border-radius: rem(16);
            }

            .van-image__error {
              border-radius: rem(16);
            }

            .van-image__error,
            .van-image__loading {
              > img {
                width: rem(120);
                height: rem(120);
              }
            }
          }
        }

        .user-name {
          font-size: rem(30);
          color: #333;
          font-weight: bold;
          margin-top: rem(18);
        }

        .title {
          font-size: rem(24);
          color: #999;
          margin-top: rem(18);
        }
      }
    }
  }
}
</style>
